import PropTypes from 'prop-types';
import React from 'react';
import s from './style.module.css';
import Tooltip from '@kuiper-components/tooltip';
import { EyeOutlined } from '@ant-design/icons';
import { CHECK_CHANGE_TYPE } from '../../../../common/constants';

function changeCheck({ fieldClassName, taskSettings }) {
	const changeTypeFormat = changeType =>changeType
		.map(type=>CHECK_CHANGE_TYPE[type])
		.join(',')
	const includeUrlDOM = () => {
		if (taskSettings?.collect.includeUrl?.length <= 0) {
			return (
				<>
					{taskSettings?.collect?.depth >= 0 && (
						<tr>
							<td className={fieldClassName}>监测深度:</td>
							<td>
								<span>{taskSettings.collect.depth}</span>层
							</td>
						</tr>
					)}
					<tr>
						<td className={fieldClassName}>监测最大URL数:</td>
						<td>
							<span>{taskSettings?.collect?.maxPage}</span>页
						</td>
					</tr>
				</>
			);
		}
	};
	const keywordsRender = (words) => {
		if (words.length < 1) {
			return "--";
		}
		const _ = words.length > 2
			? `${words.slice(0, 1).join('、')}等${words.length}个`
			: words.join('、');
		return _
	}
	const allWordsRender = words => words.join('、');
	return (
		<>
			<tr>
				<td className={fieldClassName}>监测内容:</td>
				<td>
					<table className={s.changeCheck}>
						<tbody>
						<tr>
							<td>变更类型:</td>
							<td>{changeTypeFormat(taskSettings?.collect?.changeType)}</td>
						</tr>
						<tr>
							<td>重点关注资源:</td>
							<td>
								{keywordsRender(taskSettings?.collect?.resources)}
								{(taskSettings?.collect?.resources?.length > 1) && (
									<Tooltip
										placement="top"
										overlay={
											<span className={s.tipSpan}>
												{taskSettings?.collect.resources.map(item => (
													<p>{item}、</p>
												))}
											</span>
										}
										overlayClassName={s.helpTooltip}
									>
										<EyeOutlined
											style={{fontSize: '16px', color: '#08c'}}
										/>
									</Tooltip>
								)}
							</td>
						</tr>
						<tr>
							<td>自定义违规词:</td>
							<td>
								{keywordsRender(taskSettings?.collect?.keywords)}
								{(taskSettings?.collect?.keywords?.length > 1) && (
									<Tooltip
										placement="top"
										overlay={
											<span className={s.tipSpan}>
													{allWordsRender(taskSettings?.collect?.keywords)}
											</span>
										}
										overlayClassName={s.helpTooltip}
									>
										<EyeOutlined
											style={{fontSize: '16px', color: '#08c'}}
										/>
									</Tooltip>
								)}
							</td>
						</tr>
						</tbody>
					</table>
				</td>
			</tr>
			{taskSettings?.collect.includeUrl?.length > 0 && (
				<tr>
					<td className={fieldClassName}>指定页面:</td>
					<td>
						{taskSettings?.collect.includeUrl?.[0]}
						{taskSettings?.collect.includeUrl?.length > 1 && (
							<>
								等{taskSettings?.collect.includeUrl?.length}条
								<Tooltip
									placement="top"
									overlay={
										<span className={s.tipSpan}>
											{taskSettings?.collect.includeUrl.map(item => (
												<p>{item}、</p>
											))}
										</span>
									}
									overlayClassName={s.helpTooltip}
								>
									<EyeOutlined style={{fontSize: '16px', color: '#08c'}}/>
								</Tooltip>
							</>
						)}
					</td>
				</tr>
			)}
			{includeUrlDOM()}
		</>
	);
}

changeCheck.propTypes = {
	className: PropTypes.string,
	fieldClassName: PropTypes.string,
	taskSettings: PropTypes.object,
};

changeCheck.defaultProps = {
	className: '',
};

export default changeCheck;
